<!--
 * @Author: xcl
 * @Date: 2022-04-20 18:05:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-13 10:08:02
 * @Description: BPMN
-->
<template>
  <div class="bpmn">
    <div class="com">
      <bpmn-com
        type="Modeler"
        :url="url"
        :properties="true"
        :minimap="true"
        :origin="true"
        @error="handleError"
        @shown="handleShown"
        @loading="handleLoading"
        @importFail="handleImportFail"
      ></bpmn-com>
    </div>
    <!-- Sparkline -->
    <div id="Sparkline">
      <h3>
        <a href="https://omnipotent.net/jquery.sparkline/#s-about" target="_blank">
          jQuery Sparklines
        </a>
      </h3>
      <p>
        嵌入式迷你图:
        <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
      </p>
      <p>
        具有动态数据的迷你图:
        <span class="dynamicsparkline">Loading..</span>
      </p>
      <p>
        带有动态数据的条形图:
        <span class="dynamicbar">Loading..</span>
      </p>
      <p>
        包含内联数据的条形图:
        <span class="inlinebar">1,3,4,5,3,5</span>
      </p>
    </div>
  </div>
</template>

<script>
import BpmnCom from "../../components/bpmn/BpmnCom.vue";
export default {
  name: "CesiumBPMN",
  components: {
    "bpmn-com": BpmnCom,
  },
  data() {
    return {
      url: "static/bpmn/xml/diagram.bpmn",
    };
  },
  props: {},
  watch: {},
  created() {},
  mounted() {
    this.initSparkline();
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    handleImportFail: function (error) {
      console.log("导入失败", error);
    },
    handleError: function (error) {
      console.error("无法显示图表", error);
    },
    handleShown: function (warnings) {
      console.log("图表 shown", warnings);
    },
    handleLoading: function () {
      console.log("图表加载");
    },

    initSparkline() {
      $(function () {
        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
        $(".inlinesparkline").sparkline();

        /* Sparklines can also take their values from the first argument 
        passed to the sparkline() function */
        var myvalues = [10, 8, 5, 7, 4, 4, 1];
        $(".dynamicsparkline").sparkline(myvalues);

        /* The second argument gives options such as chart type */
        $(".dynamicbar").sparkline(myvalues, {
          type: "bar",
          barColor: "green",
        });

        /* Use 'html' instead of an array of values to pass options 
        to a sparkline with data in the tag */
        $(".inlinebar").sparkline("html", { type: "bar", barColor: "red" });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bpmn {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .com {
    height: 80vh;
    width: 94%;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #2667bd;
  }

  #Sparkline {
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 40px;
    a{
      margin-right: 20px;
      text-decoration: underline;
      color: #333;
    }
    a:hover{
      color: #2667bd;
    }
    p {
      margin-right: 20px;
    }
  }
}
</style>
